/*
 * @Author: mikey.zhaopeng 
 * @Date: 2019-01-07 19:44:26 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2019-01-07 20:49:53
 * @封装个人信息页面
 */

<template>
<!-- userInfo如果父组件有传入这个对应的值就让它显示;如果没有就不显示 -->
    <div class="cell-wrapper" v-if="userInfo">
        <div class="cell-title">
            <img :src="userInfo.avatar" />
            <span>{{userInfo.name}}</span>
        </div>
    </div>
    
</template>
<script>
export default {
    name:'info-cell',
    props:{
        userInfo:Object
        },
        data(){
            return{
                
            }
        }
}
</script>
<style scoped>
.cell-wrapper{
    background-color: #fff;
    color: inherit;
    min-height: 80px;
    display: flex;
    font-size: 16px;
    overflow: hidden;
    padding: 0 8px;
    width: 100%;
    line-height: 80px;
    border-bottom: 1px solid #d9d9d9;
}
.cell-title{
    flex: 1;
}
.cell-title img{
    width: 4rem;
    height: 4rem;
    vertical-align: middle;
    margin-right: 0.6rem;
}
.cell-title span{
    display: inline-block;
    vertical-align: middle;
}
</style>


